<template>
  <el-container style="height: 91%">
      <el-col :span="3">
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-menu-item index="1" @click="bl=1">
            <el-icon>
              <svg-icon icon='personal-center'/>
            </el-icon>
            <template #title>
              <span>个人信息</span>
            </template>
          </el-menu-item>
          <el-menu-item index="2" @click="bl=2">
            <el-icon>
              <svg-icon icon='education'/>
            </el-icon>
            <span>我的文章</span>
          </el-menu-item>
          <el-menu-item index="3" @click="bl=3">
            <el-icon>
              <svg-icon icon='message'/>
            </el-icon>
            <span>回复我的</span>
          </el-menu-item>
          <el-menu-item index="4" @click="bl=4">
            <el-icon>
              <setting/>
            </el-icon>
            <span>注销账号</span>
          </el-menu-item>
          <el-menu-item index="5" style="height: 438px">

          </el-menu-item>
        </el-menu>
      </el-col>
    <el-main class="el-main" v-if="bl===1">
      <PI></PI>
    </el-main>
    <el-main class="el-main" v-if="bl===2">
      <MA></MA>
    </el-main>
    <el-main class="el-main" v-if="bl===3">
      <MR></MR>
    </el-main>
  </el-container>

</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {ref} from "vue-demi";
import PI from "@/components/personal/PersonalImformation"
import MR from "@/components/personal/MyReply"
import MA from "@/components/personal/MyArticle"


const bl = ref(1)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style scoped>

.el-main{
  /*background: #25a4bb;*/
}
</style>